<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import { useHospitalStore } from '@/store/modules/hospital'
import { useOrderStore } from '@/store/modules/order'
import type { IAllPatientContent } from '@/service/modules/user/type'

const curIndex = ref(0)
const curPatient = ref<IAllPatientContent>()
const $route = useRoute()
const $router = useRouter()

const userStore = useUserStore()
const hospitalStore = useHospitalStore()
const orderStore = useOrderStore()
const { patientsAll } = storeToRefs(userStore)
const { doctorInfo } = storeToRefs(hospitalStore)

// 发送网络请求
const getAllPatientLists = () => {
  userStore.fecthAllPatientsByUserAction()
}
const getDoctorInfoBySheduleId = (scheduleId: string) => {
  hospitalStore.fetchGetDoctorSheduleInfoByIdAction(scheduleId)
}
onMounted(() => {
  getAllPatientLists()
  if (patientsAll.value.length) {
    curPatient.value = patientsAll.value[0]
    curIndex.value = patientsAll.value[0].id
  }
  const scheduleId = $route.query.scheduleId as string
  getDoctorInfoBySheduleId(scheduleId)
})

const selectedPatient = (item: IAllPatientContent, index) => {
  curIndex.value = index
  curPatient.value = item
}
// 确定挂号按钮的
const markSureTStep2 = () => {
  // hoscode:医院编号,
  // scheduleId: 排班id,
  // patientId: 就诊人的id
  const hoscode = doctorInfo.value.hoscode
  const scheduleId = doctorInfo.value.id
  const patientId = patientsAll.value[curIndex.value]?.id
  console.log(hoscode, scheduleId, patientId)
  orderStore.fetchPostCreateOrderByIds(hoscode, scheduleId, patientId)
}
</script>
<template>
  <div class="register_step2">
    <div class="schedule-class">
      <custom-title-v1 title="确认挂号信息"></custom-title-v1>
    </div>
    <!-- 选择就诊人 -->
    <div class="step2-floor">
      <div class="floor-title">
        <custom-title-v4 title="选择就诊人"></custom-title-v4>
      </div>
      <div class="floor-box">
        <div class="patient-box">
          <PatientItem
            :patientsAll="patientsAll"
            :curIndex="curIndex"
            @selectedPatient="selectedPatient"
          ></PatientItem>
        </div>
      </div>
    </div>
    <!-- 选择就诊卡 -->
    <div class="step2-floor floor2">
      <div class="floor-title">
        <custom-title-v4 title="选择就诊卡"></custom-title-v4>
        <div class="floor2-notice">
          <el-icon><Warning /></el-icon>
          <span
            >如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销</span
          >
        </div>
      </div>
      <div class="floor-box">
        <el-card class="floor2-card">
          <template #header>
            <div class="card-header">
              <div class="item">{{ curPatient?.name }}</div>
              <div class="item">{{ curPatient?.certificatesNo }}</div>
              <div class="item">
                {{ curPatient?.param?.certificatesTypeString }}
              </div>
            </div>
          </template>
          <div class="patient-cardsbox">
            <div class="card-info">
              <div class="card-cate">
                {{ curPatient?.isInsure === 1 ? '医保' : '自费' }}
              </div>
              <div class="card-cont">
                <span>{{ curPatient?.certificatesNo }}</span>
                <span> {{ curPatient?.param?.certificatesTypeString }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 挂号信息 -->
    <div class="step2-floor">
      <div class="floor-title">
        <custom-title-v4 title="挂号信息"></custom-title-v4>
      </div>
      <div class="floor-box">
        <el-descriptions :column="2" border class="dectable">
          <el-descriptions-item label="就诊日期：">
            {{ doctorInfo.workDate }} {{ doctorInfo.param?.dayOfWeek }}
            {{ doctorInfo.workTime == 0 ? '上午' : '下午' }}
          </el-descriptions-item>
          <el-descriptions-item label="就诊医院：">
            {{ doctorInfo.param?.hosname }}
          </el-descriptions-item>
          <el-descriptions-item label="就诊科室：">
            {{ doctorInfo.param?.depname }}
          </el-descriptions-item>
          <el-descriptions-item label="医生姓名：">
            {{ doctorInfo?.docname }}
          </el-descriptions-item>
          <el-descriptions-item label="医生职称：">
            {{ doctorInfo?.title }}
          </el-descriptions-item>
          <el-descriptions-item label="医生专长：">
            {{ doctorInfo?.skill }}
          </el-descriptions-item>
          <el-descriptions-item label="医事服务费：">
            <span class="amount"> {{ doctorInfo?.amount }}元</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 用户信息 -->
    <div class="step2-floor">
      <div class="floor-title">
        <custom-title-v4 title="用户信息"></custom-title-v4>
      </div>
      <div class="floor-box">
        <el-descriptions :column="2" border class="dectable">
          <el-descriptions-item label="就诊人手机号：">
            {{ curPatient?.phone }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 确认挂号 -->
    <div class="btn-box">
      <el-button class="confirmBtn" type="primary" @click="markSureTStep2">
        确认挂号
      </el-button>
    </div>
  </div>
</template>
<style scoped lang="less">
.register_step2 {
  .step2-floor {
    margin-top: 30px;
    .floor-title {
      margin: 20px 0;
    }
    .floor-box {
      width: 100%;
      .patient-box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
    }

    &.floor2 {
      .floor-title {
        display: flex;
        align-items: center;

        .floor2-notice {
          color: #ff5f5f;
          font-size: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 20px;
          .el-icon {
            font-size: 15px;
            margin-right: 5px;
          }
          span {
            letter-spacing: 1px;
          }
        }
      }
      .floor-box {
        .floor2-card {
          .card-header {
            display: flex;
            .item {
              margin-right: 20px;
              font-size: 16px;
              color: #333;
              margin-right: 30px;
            }
          }
          .patient-cardsbox {
            display: flex;
            padding: 20px;
            .card-info {
              padding: 10px;
              display: flex;
              background-color: #4990f1;
              border-radius: 3px;
              align-items: center;
              .card-cate {
                background-color: #fff;
                padding: 5px;
                border-radius: 5px;
                color: #4990f1;
              }
              .card-cont {
                margin-left: 15px;
                color: #fff;
                font-weight: 900;
                span {
                  margin-right: 20px;
                }
              }
            }
          }
        }
      }
    }

    :deep(.el-descriptions) {
      &.dectable {
        margin: 50px auto;
        .el-descriptions__label {
          width: 150px;
          text-align: right;
          letter-spacing: 2px;
          color: #666;
          font-weight: 900;
        }
        .el-descriptions__content {
          text-align: left !important;
          color: #333;
          .amount {
            color: #2d81f7;
            font-weight: 600;
            letter-spacing: 2px;
          }
        }
      }
    }
  }
  .btn-box {
    text-align: center;
    .confirmBtn {
      width: 140px;
      justify-content: center;
      align-items: center;
      background-color: #4490f1;
      box-shadow: 0 10px 20px -10px rgba(73, 144, 241, 0.5);
      border-radius: 4px;
      height: 44px;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.2s ease;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      &:hover {
        background-color: #2d81f7;
      }
    }
  }
}
</style>
